
{% stylesheet %}

@media screen and (max-width: 767px) {
  .block_faq {
    background-color: var(--bg);
  }
}
.block_faq .content {
  z-index: 10;
  position: relative;
}

.block_faq .content .aq {
  color: var(--faq-color);
}
.block_faq .content .aq .aq_wrapper {
  background-color: var(--faq-bg);
}
.block_faq .content .aq .aq_wrapper .list .list_item:nth-last-child(1) {
  border-bottom: 0 !important;
}
.block_faq .content .aq .aq_wrapper .list .list_item.open .question .icon_span {
  background-color: rgb(26, 26, 26);
  color: #fff;
}
.block_faq .content .aq .aq_wrapper .list .list_item.open .question .icon_span svg {
  transform: rotate(-90deg);
}
.block_faq .content .aq .aq_wrapper .list .list_item .question {
  cursor: pointer;
}
.block_faq .content .aq .aq_wrapper .list .list_item .question:hover .icon_span {
  background-color: var(--faq-color);
  color: #fff;
}
.block_faq .content .aq .aq_wrapper .list .list_item .question .icon_span {
  display: inline-flex;
  height: 24px;
  width: 24px;
	flex-shrink: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background-color: rgba(26, 26, 26, 0.12);
  color: var(--faq-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.block_faq .content .aq .aq_wrapper .list .list_item .question .icon_span svg {
  transform: rotate(90deg);
  transition: transform 0.2s ease-in-out;
}
.block_faq .content .aq .aq_wrapper .list .list_item .answer {
  display: none;
	padding-bottom: 1.25rem;
	opacity: 0.6;
}

.block_faq .aq_wrapper{
  box-sizing: border-box;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px
}/* __play_start_utilities__ */

@media (min-width: 768px){
  .block_faq .aq_wrapper{
		padding: 60px;
  }
}/* __play_end_utilities__ */

.block_faq .aq{
  padding-top: 5px;
  padding-bottom: 5px
}/* __play_start_utilities__ */

@media (min-width: 768px){
  .block_faq .aq{
    margin-top: 0px;
  }
}/* __play_end_utilities__ */

.block_faq .question{
  display: flex;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}
.block_faq .question_title{
	font-size: 16px;
	font-weight: bold;
	font-family: Montserrat, Montserrat;
}
.block_faq .list_item{
	border-bottom: 1px solid #DDDDDD;
}
.block_faq .block_faq_img{
		max-height:100px
}
{% endstylesheet %}


{% assign data = section.settings %}
{% assign blockId = block_id | default : section.block_id %}

<div class="block_faq" id="block_faq-{{ blockId }}" style="--bg: {{data.bg_color}};--text-color: {{data.text_color}};">
	{% include 'block_title', title: data.title, detail: data.detail %}

  <div class="container_wrapper">
    <div class="content">
      <div class="aq " style="--faq-bg: {{data.faq_bg}};--faq-color: {{data.faq_color}};">
        <div class="aq_wrapper ">
          <ul class="list">
            {% for block in section.blocks %}
              {% if block.question != '' %}
                <li class="list_item">
                  <div class="question ">
                    <span class="question_title">{{ block.question }}</span>
                    <span class="icon_span flex-shrink-0">
                      <svg
                        role="presentation"
                        focusable="false"
                        width="5"
                        height="8"
                        class="icon icon-chevron-right-small reverse-icon"
                        viewBox="0 0 5 8"
                      >
                        <path d="m.75 7 3-3-3-3" fill="none" stroke="currentColor" stroke-width="1.5"></path>
                      </svg>
                    </span>
                  </div>
                  <div class="answer">
                    {{ block.answer }}
                  </div>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

{% javascript %}
	$(function() {


function switchClass(dom, name, hasFunc, notFunc, finallyFunc) {
	 if (dom.hasClass(name)) {
		 dom.removeClass(name);

		 if (hasFunc) {
			 hasFunc();
		 }
	 } else {
		 dom.addClass(name);

		 if (notFunc) {
			 notFunc();
		 }
	 }

	 if (finallyFunc) {
		 finallyFunc();
	 }
 };

 $('#block_faq-{{ blockId }} .question').on('click', function(e) {
	 switchClass($(this).parents('.list_item'),'open',() => {
		 $(this).parents('.list_item').find('.answer').slideUp(200)
	 },() => {
		 $(this).parents('.list_item').find('.answer').slideDown(200)
	 })
 })
})
{% endjavascript %}

{% schema %}
{
	"class": "block_faq",
	"is_global": false,
	"icon": "icon-FAQ",
	"name": {
		"zh_CN": "FAQ",
		"en_US": "FAQ"
	},
	"max_blocks": 20,
	"blocks": [
		{
			"name": {
				"zh_CN": "FAQ",
				"en_US": "FAQ"
			},
			"type": "item",
			"settings": [
				{
					"type": "card_input",
					"label": {
						"zh_CN": "问题",
						"en_US": "Problem"
					},
					"id": "question",
					"default": "Do you ship overseas?"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "回答"
					},
					"id": "answer",
					"default": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals."
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "Use this text to share information about your product or shipping policies."
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"id": "faq_bg",
			"label": {
				"zh_CN": "回答背景颜色"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "faq_color",
			"label": {
				"zh_CN": "回答文字颜色"
			},
			"default": "#1A1A1A"
		}
	],
	"default": {
        "settings": {
          "title": "FAQ",
          "detail": "Use this text to share information about your product or shipping policies.",
          "faq_bg": "#F6F6F6",
          "faq_color": "#1D1F21"
        },
        "blocks": [
          {
            "question": "Do you ship overseas?",
            "answer": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.",
            "block_type": "item"
          },
          {
            "question": "Do I need to setup an account to place an order?",
            "answer": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.",
            "block_type": "item"
          },
          {
            "question": "Do you offer gift wrapping",
            "answer": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.",
            "block_type": "item"
          },
          {
            "question": "How long will it take to get my orders?",
            "answer": "Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.",
            "block_type": "item"
          }
        ]
      }
}
{% endschema %}
